<template>
  <div
    class="flex fixed left-0 bottom-0 right-0 bg-black text-zinc-100 text-sm"
    :class="[partitionStyle[partitionType], isSelectWindow ? 'top-8': 'top-[44px]' ]"
  >
    <div
      :class="[
        partitionType !== '2x2' ? 'flex-1' : 'w-[50%]',
        partitionType === '2x2' ? 'h-[50%]' : '',
        partitionType === '2x1' ? 'w-[100%] h-[50%]' : '',
        partitionType === '1x2' ? 'w-[50%]' : '',
        index === currentIndex ? 'bg-[#2b2b2b]' : ''
      ]"
      class="border-[#202020] border relative box-border"
      v-for="(item, index) in partitionNumber"
      @click="handleSelect(index)"
      :key="index"
    >
      <div
        ref="partitionRefList"
        :class="'partition' + index"
        class="w-full h-full"
      ></div>
      <span
        v-if="!group[index]"
        class="absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] text-[#f2af33]"
        >Please click a stack onto here to view image</span
      >
    </div>
  </div>
</template>

<script>
import cornerstone from 'cornerstone-core'
import cornerstoneTools from '@/lib/cornerstoneTools'

export default {
  props: {
    partitionType: {
      type: String
    },
    currentViewIndex: {
      type: Number
    },
    cornerstoneToolsType: {
      type: String
    },
    isSelectWindow: {
      type: Boolean
    }
  },
  data() {
    return {
      group: {},
      partitionRefList: null,
      markeData: {},
      currentIndex: null,
      groupTemp: [],
      partitionStyle: {
        '1x1': '',
        '2x1': 'flex-col',
        '1x2': '',
        '2x2': 'flex-wrap'
      }
    }
  },
  computed: {
    partitionNumber() {
      return this.partitionType === '2x2'
        ? 2 * 2
        : this.partitionType.includes('2')
        ? 2 * 1
        : 1 * 1
    }
  },
  methods: {
    initViewportList(item, index) {
      const currentIndex = this.currentIndex
      if (this.group[currentIndex]?.dataIo === item.dataIo) return
      this.$nextTick(() => {
        const elList = this.$refs.partitionRefList
        let el
        if ((el = elList[currentIndex])) {
          cornerstone.enable(el)
          cornerstone.loadAndCacheImage(item.dataIo).then((image) => {
            cornerstone.displayImage(el, image)
            this.addTools(el)
            this.activeTool(this.cornerstoneToolsType)
            this.group[currentIndex] = item
          })
        }
      })
    },
    activeTool(toolName) {
      cornerstoneTools.setToolActive(toolName, { mouseButtonMask: 1 })
    },
    clearToolState(ele) {
      if (!ele) return
      cornerstoneTools.clearToolState(ele, 'RectangleRoi')
      cornerstoneTools.clearToolState(ele, 'EllipticalRoi')
      cornerstoneTools.clearToolState(ele, 'FreehandRoi')
      cornerstoneTools.clearToolState(ele, 'Eraser')
      cornerstoneTools.clearToolState(ele, this.cornerstoneToolsType)
      cornerstone.updateImage(ele)
    },
    addTools(ele) {
      cornerstoneTools.addTool(cornerstoneTools.RectangleRoiTool, ele)
      cornerstoneTools.addTool(cornerstoneTools.EllipticalRoiTool, ele)
      cornerstoneTools.addTool(cornerstoneTools.FreehandRoiTool, ele)
      cornerstoneTools.addTool(cornerstoneTools.EraserTool, ele)
      cornerstoneTools.addTool(cornerstoneTools.PanTool, ele)
      cornerstoneTools.addTool(cornerstoneTools.AngleTool, ele)
      cornerstoneTools.addTool(cornerstoneTools.ZoomTool, ele)
      cornerstoneTools.addTool(cornerstoneTools.ZoomTouchPinchTool, ele)
      cornerstoneTools.addTool(cornerstoneTools.LengthTool, ele)
      cornerstoneTools.addTool(cornerstoneTools.CircleRoiTool, ele)
      cornerstoneTools.addTool(cornerstoneTools.ReferenceLinesTool, ele)
    },
    handleSelect(index) {
      console.log('handleSelect')
      this.currentIndex = index
    }
  },
  beforeDestroy() {
    this.clearToolState()
  }
}
</script>

<style scoped></style>
